<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/vue.global.js"></script>
    <title>1-v-model-basic</title>
  </head>

  <body>
    <div id="v-model-basic">
      <!-- 用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
          它会根据控件类型自动选取正确的方法来更新元素。
          v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值
          而总是将当前活动实例的数据作为数据来源。 -->

      <!-- 文本 (Text) -->
      <input v-model="message" placeholder="edit me" />
      <p>Message is: {{ message }}</p>

      <!-- 多行文本 (Textarea) -->
      <span>Multiline message is:</span>
      <p style="white-space: pre-line">{{ message }}</p>
      <br />
      <textarea v-model="message" placeholder="add multiple lines"></textarea>
      <br />
      <!-- 复选框 (Checkbox) -->
      <input type="checkbox" id="checkbox" v-model="checked" />
      <label for="checkbox">{{ checked }}</label>
      <br />
      <!-- 多个复选框，绑定到同一个数组： -->
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames" />
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
      <label for="mike">Mike</label>
      <br />
      <span>Checked names: {{ checkedNames }}</span>
      <br />

      <!-- 单选框 (Radio) -->
      <input type="radio" id="one" value="One" v-model="picked" />
      <label for="one">One</label>
      <br />
      <input type="radio" id="two" value="Two" v-model="picked" />
      <label for="two">Two</label>
      <br />
      <span>Picked: {{ picked }}</span>
      <br />

      <!-- 选择框 (Select) -->
      <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
      <br />
      <!-- 多选时 (绑定到一个数组)： -->
      <select v-model="selected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br />
      <span>Selected: {{ selected }}</span>
      <br />
      <!-- 用 v-for 渲染的动态选项： -->
      <select v-model="selected">
        <option v-for="option in options" :value="option.value">
          {{ option.text }}
        </option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            message: '',
            checked: false,
            checkedNames: [],
            picked: '',
            selected: 'A',
            options: [
              { text: 'One', value: 'A' },
              { text: 'Two', value: 'B' },
              { text: 'Three', value: 'C' },
            ],
          };
        },
      }).mount('#v-model-basic');
    </script>
  </body>
</html>
